<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <link href="/web-frame/element/css/index.css" rel="stylesheet"/>
    <script src="/web-frame/element/js/vue.js"></script>
    <script src="/web-frame/element/js/index.js"></script>
    <script src="/web-frame/element/js/axios.js"></script>
    <script src="/web-frame/lib/app.js"></script>
</head>
<body>
<div id="app">

    <h2>消息提示</h2>
    <template>
        <el-button :plain="true" @click="open">打开消息提示</el-button>
        <el-button :plain="true" @click="openVn">VNode</el-button>
    </template>
    <hr>
    <h2>确认消息</h2>
    <template>
        <el-button type="text" @click="openConfirm">点击打开 Message Box</el-button>
    </template>
</div>
<script>
    var Main = {
        data() {
            return {

            }
        },
        created(){

        },
        methods: {
            open() {
                this.$message('这是一条消息提示');
            },
            openConfirm() {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            openVn() {
                const h = this.$createElement;
                this.$message({
                    message: h('p', null, [
                        h('span', null, '内容可以是 '),
                        h('i', {style: 'color: teal'}, 'VNode')
                    ])
                });
            }
        }
    }
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')
</script>
</body>
</html>